<?php include 'inc/teacher_head.php';?>


<div class="layui-container">


    <div  id="div_bjkc">
        <div class="layui-form layui-form-pane">
            <!-- 插入选择班级、课程的组件 -->
            <?php [$showTitle, $showClass, $showTask]  = [ 1, 1, 1]; ?>
            <?php include 'inc/widget_bjkc.php'; ?>
        </div>
    </div>


    <div class='layui-row layui-form layui-form-pane'>

            <div class="layui-input-inline layui-col-xs5" style='margin-left:5px;'>
                <table class="layui-table" id="students" lay-filter="students"></table>
            </div>

            <div class="layui-input-inline  layui-col-xs6">
                <div id='div_random_stu'></div>
            </div>

    </div><!-- row end -->

    <input type="hidden" name="stu_id" id="stu_id" value="">

</div><!--container end-->


<?php include 'inc/teacher_foot.php';?>


<!-- JS脚本开始 -->
<script type="text/javascript">
layui.use(['table', 'form', 'element'], function () {
    var table       = layui.table
        , element   = layui.element
        , form      = layui.form
        , $         = layui.$;

// 机房学生机总数（全局）
let maxPC     = <?=c('maxPC')?>;
// 已选择的班级、课程（全局）
let sel_task  = $('select[name="tasks"]').find("option:selected");
let sel_class = $('select[name="classes"]').find("option:selected");



$('#nav_stu').addClass('layui-this'); //设置导航当前选中项的样式


// 随机点名
form.on('submit(randomStu)',function(){
    let max = $('.has').length;
    let i = 0;
    let x = setInterval(function(){
                let num = Math.floor(Math.random()*max);
                let the = $('.has')[num];
                $('.has').removeClass('stuChose');
                $(the).addClass('stuChose');
                i++;
                //超过次数，退出定时器
                if(i>20) clearInterval(x);
            },100);
});

// 显示全部学生 按钮事件
$("body").on('click','#total_stu',function(){
    reloadStuTable();
});


// 自定义表单的验证规则
form.verify({
    neq0:function(value,item){
        if(value=='0'){ return '分值不可为0'; }
    },
    site:function(value,item){
      if(isNaN(value) || value > maxPC || value < 0){
        return '座位号必须在1-'+maxPC+'之间的数字,【' + value + '】不符合要求!';
    }
    }
});



// 快速设置 奖惩原因
$(".jc span").click(function () {
    var reason = $.trim($(this).text());
    $('input[name="reason"]').val(reason);  // 设置原因
    switch (reason) {                       // 设置分值
        case '旷 课':
        case '随意换位':
        case '代做作业':
            $('input[name="point"]').val('-3');
            break;
        case '带零食':
        case '带手机':
        case '早 退':
            $('input[name="point"]').val('-2');
            break;
        case '随意讲话':
        case '迟 到':
        case '回答错误':
            $('input[name="point"]').val('-1');
            break;
        case '回答正确':
            $('input[name="point"]').val('1');
            break;
        case '认真打扫':
            $('input[name="point"]').val('2');
            break;
        case '好人好事':
            $('input[name="point"]').val('3');
            break;
    }
});


//选择班级或课程时 刷新学生名单
form.on('select()', function(data){
    sel_class = $('select[name="classes"]').find("option:selected");
    table.reload('students', {
        where: {class_id: sel_class.val() }
        , cols: [ cols1 ]
        , done: function (r) {
            reloadStu(r); // 刷新右侧的座位块、班级人数
        }
    });


});

// 学生名单表格 各列 全不选
let cols1=[
        {checkbox: true, LAY_CHECKED:false}
        , {field: 'site',width: 70,  edit: 'text', align: 'right', sort: true, title: '座位'}
        , {field: 'name', width: 70, edit: 'text',  title: '姓名'}
        , {field: 'role', width:120, edit: 'text', align: 'left', sort: true,title: '职务'}
        , {field: 'task_point', width:70, edit: 'text', align: 'center', sort: true, title: '成绩'}
        , {field: 'game_point', width:70, edit: 'text', align: 'center', sort: true, title: '积分'}
        , {field: 'good', width:70, align: 'center', sort: true, title: '奖励'}
        , {field: 'bad', width:70,  align: 'center', sort: true, title: '惩罚'}
        ];
// 学生名单表格 各列 全选
let cols2=[
        {checkbox: true, LAY_CHECKED:true}
        , {field: 'site',width: 80,  edit: 'text', align: 'right', sort: true, title: '座位'}
        , {field: 'name', width: 80, edit: 'text',  title: '姓名'}
        , {field: 'role', minwidth:80, edit: 'text', align: 'left', sort: true,title: '职务'}
        , {field: 'task_point', width:80, edit: 'text', align: 'center', sort: true, title: '成绩'}
        , {field: 'game_point', width:80, edit: 'text', align: 'center', sort: true, title: '积分'}
        , {field: 'good', width:90, align: 'center', sort: true, title: '奖励'}
        , {field: 'bad', width:90,  align: 'center', sort: true, title: '惩罚'}
        ];

// 初始化学生名单表格
let stuTable=table.render({
    elem: '#students'
    , id: 'students'
    , url: '/teacher/getStu'
    , toolbar:'#bar'
    , defaultToolbar: ['exports']
    , size:'sm'
    , height:488
    // , width:730
    , even:true
    , where: {'class_id': sel_class.val() }
    , cols: [ cols1 ]
    , done: function (r) {
        reloadStu(r);
    }
});


// 统计班级学生数、刷新右侧名牌矩阵
function reloadStu(r){
    // 统计人数
    let stuNum = r.count;
    for(let i in r.data){
        if (r.data[i].site > maxPC) stuNum--; //去除老师数(大于70)
    }
    $('#total_stu').text(sel_class.text() + ' 共' + stuNum + '人');
    // 刷新名牌
    $('#div_random_stu').empty();
    $('#div_random_stu').append("<div style='float:left;width:10px;'>&nbsp;</div>");
        let stulist = r.data;
        let name;
        // 循环增加N个空位
        for (var i = 1; i <= maxPC; i++) {
            name = "<a class='layui-btn layui-btn-xs layui-btn-primary stu0'>"
            + i +
            "<br>空</a>";
            $('#div_random_stu').append(name);
        }
        // 给非空的座位贴上姓名，并设置不同样式
        for(let x in stulist){
            let site  = parseInt(stulist[x].site);
            if (site <= maxPC){
                let point = parseInt(stulist[x].game_point);
                let name  = stulist[x].name;
                let id    = stulist[x].id;
                let role  = stulist[x].role
                let bad  = stulist[x].bad
                let the   = $('#div_random_stu .layui-btn')[site-1];
                $(the).data({id:id,name:name,site:site}); //存数据供后续操作用
                $(the).removeClass("stu0");
                the.innerText=site+'\n'+name;  //贴上座位号 姓名
                $(the).attr('title', role);   //悬停显示具体的职务
                if (bad > 0){
                    $(the).addClass("stu3");  //
                }else{
                    $(the).addClass("stu1");
                }
                if(role){
                    if(role=='班长'){
                        $(the).addClass("stu9");
                    }else if(role=='信息技术课代表'){
                        $(the).addClass("stu5");
                    }else{  //其他课代表
                        $(the).addClass("stu4");
                    }
                }
                $(the).addClass("has");
            }
        }
}

//刷新学生表格 显示全部学生 不选中
function reloadStuTable(){
    table.reload('students', {
        where: {class_id: sel_class.val()}
        , cols: [ cols1 ]
        , done: function (r) {
            reloadStu(r); // 刷新右侧的座位块、班级人数
     }
    });
}


//动态添加的名牌 按钮事件
$('#div_random_stu').on('click','.has',function(r){
    let string = $(this)[0].innerText;
    let site   = string.split('\n')[0];
    //console.log(site);
    let sel_class = $('select[name="classes"]').find("option:selected");
    // 重载表格为单击选中的学生
    table.reload('students', {
        url:'/teacher/getStu'
        , where: {
            class_id: sel_class.val(),
            site: site
        }
        , cols: [cols2]
        , done: function (r) {
            $('#total_stu').text("显示全部学生");
        }
    });
});

// 双击名牌显示个人积分记录
$('#div_random_stu').on('dblclick','.has',function(){
  let data=$(this).data();
  oneStuRec(data);
});


//触发行双击事件 查看学生积分记录
table.on('rowDouble(students)', function(obj){
  let data=obj.data;
  oneStuRec(data);
});


// 单个学生积分记录
function oneStuRec(data){
    let stu_id=data['id'];
    let site= data['site'];
    let name= data['name'];
    table.render({
        elem: '#records'
        , id: 'records'
        , url: 'getRecord'
        , where: {
              stu_id: stu_id
            , type: $('input[name="type"]:checked').val()
        }
        , cols: [[
              {field:'id', align: 'center', title: 'ID'}
            ,{field: 'created', width: 200, align: 'center', sort: true, title: '时 间'}
            , {field: 'point', width: 100, align: 'center', sort: true, title: '分 值'}
            , {field: 'reason', title: '原 因'}
            , {field: 'category_name', width: 300, title: '分 类'}
            , {field: 'task_name', width: 300, title: '课 程'}
            , {field: 'type', width: 100, align: 'center', title: '类 型'}

        ]]
        , page: true
        , even: true
        ,done:function(){
            $("#stu_id").val(stu_id);
            // 根据操作类型，设置背景色
            $("#div_stu_records tr").each(function(i){
                var txt = $(this).find('td:eq(6)').text();
                if(txt){
                    if(txt.indexOf('奖励加分')>=0) $(this).css({'background-color':'#CCFF99'});
                    if(txt.indexOf('惩罚扣分')>=0) $(this).css({'background-color':'#FFCCCC'});
                    if(txt.indexOf('游戏扣分')>=0) $(this).css({'background-color':'#FFFFCC'});
                    if(txt.indexOf('作业加分')>=0) $(this).css({'background-color':'#99CCFF'});
                }
            });
        }
    });
    //接着弹出其积分记录页面层
    layer.open({
        type: 1
        , title: '<h3 style="color:#009688">' + site + '号_' + name + '的记录 【按ESC键可关闭此窗口】</h3>'
        , content: $('#div_stu_records')
        , area: ['100%', '100%']
    });
}


//删除所选学生
form.on('submit(delStu)', function () {
    let sel = table.checkStatus('students').data;
    if (sel.length > 0) {
        layer.confirm('真的要删除？', {icon: 3}, function (index) {
            layer.msg('正在删除中,请稍侯...');
            $.post('/teacher/delStu', {data:sel}, function(r){
                    reloadStuTable();
                    layer.msg(r);
            });
            layer.close(index);
        });
    } else {
        layer.alert('请先选中要删除的学生',{icon: 1});
    }
    return false;
});


// 奖惩所选学生
form.on('submit(jcStu)', function () {
    let sel = table.checkStatus('students').data;
    let list, sitelist = "";
    for (var i in sel) {
        if (i==0){
            list = sel[i].site + sel[i].name;
            sitelist = sel[i].site;
        }else{
            list += "," + sel[i].site + sel[i].name;
            sitelist += "." + sel[i].site;
        }
    }
    console.log(sitelist);
    $("#jc textarea[name='list']").val(list);
    $("#jc input[name='sitelist']").val(sitelist); //隐藏域

    if (sel.length > 0) {
        layer.open({
            type: 1
            , title: '<h3 style="color:#009688">正在进行 奖惩操作 </h3>'
            , content: $('#jc')
            , area: ['730px', '500px']
        });
    } else {
        layer.alert('请先选中要奖惩的学生');
    }
    return false;
});


// 弹出 添加学生 操作层
form.on('submit(addStu)', function () {
    layer.open({
        type: 1
        , title: '<h3 style="color:#009688"> 添加学生 </h3>'
        , content: $('#AddStuDiv')
        , area: ['510px', '250px']
    });
    return false;
});


// do添加学生
form.on('submit(doAddStu)',function(){
    $('input[name="class_id"]').val(sel_class.val());
    let post=$('#addStuFrm').serialize();
        $.post('/teacher/addStu',post,function(res){
            if(res=='1'){
                reloadStuTable();
                layer.closeAll();
                layer.msg('添加成功');
            }else{
                layer.alert('此座位已有学生！');
            }
        })
        return false;
});


// 确定奖惩
form.on('submit(doJC)', function (obj) {
    let index=layer.msg('正在操作，请稍候。。。', {
                icon: 16,
                time: 0,
                shade:0.3,
    });

    let v2= {};
    let sel_items  = table.checkStatus('students').data; //选中的学生信息

    v2.point    = obj.field.point;
    v2.type     = ( v2['point'] > 0 ) ? "奖励加分" : "惩罚扣分";
    v2.reason   = obj.field.reason;
    v2.task_id  = sel_task.val();
    v2.class_id = sel_class.val();
    v2.sitelist = $("#jc input[name='sitelist']").val();

     $.post('/teacher/JC', v2, function (r) {
        layer.closeAll();
        table.reload('students');
        layer.msg('成功');
        $("input[name='point']").val('');//清空
        $("input[name='reason']").val('');
    })
    return false;
});



// 编辑学生座位，姓名，积分等信息
table.on('edit(students)', function (obj) {
    console.log($(this).prev().text());//修改前的值
    var value = obj.value //得到修改后的值
        , data = obj.data //得到所在行所有键值
        , field = obj.field //得到字段
        ,oldSite=$(this).prev().text();
    if(field=='site'){
        if(value > maxPC || value < 0){
            layer.msg('座位号必须在1-'+maxPC+'之间');
            return false;
        }
    }
    $.post('/teacher/edtStu', {
        oldSite: oldSite,
        oldData: data,
        newValue: value,
        field: field
    }, function (r) {
        if (r == '-1') {
            layer.alert('座位号重复，修改失败！', {icon: 5}, function () {
                // table.reload('students');
                layer.closeAll();
            });
        } else {
            layer.msg('修改成功！');
        }
        reloadStuTable();
    });
});




// 切换积分记录的类型,刷新表格
form.on('radio(filter)', function () {
    var type = $('input[name="type"]:checked').val();
    table.reload('records', {
        where: {type: type,stu_id:$("#stu_id").val()}
        ,page:{curr:1}
    })
})


// 监听ESC键，取消弹出层
$(document).keydown(function(e){
    if(e.which == 27){
        layer.closeAll();
    }
});




});

</script>



<?php include 'inc/teacher_foot.php';?>


<!-- 以下为各弹出层代码 -->

<!-- 添加学生Div -->
<div id="AddStuDiv" style="display:none;margin:25px 15px;">
<form class="layui-form layui-form-pane" id='addStuFrm'>
    <input type="hidden" name="class_id" value=''>
    <div class="layui-form-item"  style="padding-left:20px;">
        <label class="layui-form-label"> 座位号 </label>
        <div class="layui-input-block">
            <input class="layui-input" placeholder="请输入座位号" lay-verify="required" name="site" type="text" style="width:330px;" />
        </div>
    </div>
    <div class="layui-form-item"  style="padding-left:20px;">
        <label class="layui-form-label"> 姓 名 </label>
        <div class="layui-input-block">
            <input class="layui-input" lay-verify="required"  name="name" placeholder="请输入学生姓名" type="text" style="width:330px;" />
        </div>
    </div>
    <div class="layui-form-item">
        <div style="margin-left:356px;">
            <button class="layui-btn " lay-filter="doAddStu" lay-submit>
                确 认 操 作 </button>
        </div>
    </div>
</form>
</div>


<!-- 学生奖惩操作层 -->
<div id="jc" style="display:none;margin:25px 15px;">
<form class="layui-form layui-form-pane" style="padding-left: 20px;">
    <!-- 座位列表 -->
    <input type="hidden" name="sitelist" />

    <div class="layui-form-item layui-form-text" style="width: 650px">
        <label class="layui-form-label">将被奖惩的学生名单:</label>
        <div class="layui-input-block">
          <textarea  class="layui-textarea" name="list" readonly
          style="height: 80px;"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"> 奖惩分值 </label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required|number|neq0"  name="point" placeholder="分值可正可负" type="text" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"> 奖惩原因 </label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="可单击下面按钮" lay-verify="required" name="reason" type="text" style="width:215px" />
            </div>
        </div>
    </div>

    <div class="layui-form-item jc"  style="line-height: 30pt;">
        <div class="layui-btn-group">
            <span class="layui-btn layui-btn-sm good"> 好人好事 </span>
            <span class="layui-btn layui-btn-sm bad"> 随意换位 </span>
            <span class="layui-btn layui-btn-sm bad"> 随意讲话 </span>
            <span class="layui-btn layui-btn-sm bad"> 代做作业 </span>
            <span class="layui-btn layui-btn-sm bad"> 旷 课 </span>
            <span class="layui-btn layui-btn-sm good"> 回答正确 </span>
        <br>
            <span class="layui-btn layui-btn-sm good"> 打扫负责 </span>
            <span class="layui-btn layui-btn-sm bad"> 早 退 </span>
            <span class="layui-btn layui-btn-sm bad"> 迟 到 </span>
            <span class="layui-btn layui-btn-sm bad"> 带手机 </span>
            <span class="layui-btn layui-btn-sm bad"> 带零食 </span>
            <span class="layui-btn layui-btn-sm bad"> 回答错误 </span>
        </div>

        <div style="float: right;margin:20px 25px;">
            <button class="layui-btn" lay-filter="doJC" lay-submit> 确 认 操 作 </button>
        </div>
    </div>


</form>
</div>

<!-- 查看单个学生积分记录 -->
<div id="div_stu_records" style="display: none;padding:50px;">
    <div class="layui-form layui-form-pane">
        <div class="layui-form-item" pane="">
            <label class="layui-form-label" for="">选择类型:</label>
            <div class="layui-input-block">
                <input type="radio" title="全部记录" name="type" value="" lay-filter="filter" checked="">
                <input type="radio" title="惩罚扣分" name="type" value="惩罚扣分" lay-filter="filter">
                <input type="radio" title="游戏扣分" name="type" value="游戏扣分" lay-filter="filter">
                <input type="radio" title="作业加分" name="type" value="作业加分" lay-filter="filter">
                <input type="radio" title="奖励加分" name="type" value="奖励加分" lay-filter="filter">
            </div>
        </div>
        <div class="layui-form-item">
            <table class="layui-table" id="records" lay-filter="records"></table>
        </div>
    </div>
</div>


<!-- 学生名单 表头的工具栏 -->
<script type="text/html" id="bar">
    <div style="text-align:center;">
        <div class="layui-btn-group">
            <a class='layui-btn layui-btn-sm layui-btn-normal' id="total_stu">人数统计</a>
            <a class="layui-btn layui-btn-sm b1" lay-filter="addStu" lay-submit>&nbsp;添加&nbsp;</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger" lay-filter="delStu" lay-submit>&nbsp;删除&nbsp;</a>
            <a class="layui-btn layui-btn-sm b1" lay-filter="jcStu" lay-submit>&nbsp;奖惩&nbsp;</a>
            <a class='layui-btn layui-btn-sm layui-btn-normal' lay-filter="randomStu" lay-submit id="random_stu">随机点名</a>
        </div>
    </div>
</script>

